<!-- 设置 -->
<template>
  <view class="settings">
    <view class="container" style="padding-top: 20rpx">
      <!-- 设置内容 -->
      <view class="menu-list">
        <view class="menu-item" @click="navigateToUserPrivacy">
          <text>用户隐私协议</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view class="menu-item" @click="navigateToUserAgreement">
          <text>用户服务协议</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view class="menu-item">
          <text>车位预定服务协议</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view class="menu-item">
          <text>车位团购服务协议</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout" @click="logout">
        <text class="logout-text">退出登陆</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    navigateToUserPrivacy() {
      uni.navigateTo({
        url: "/pages/login/agree",
      });
    },
    navigateToUserAgreement() {
      uni.navigateTo({
        url: "/pages/login/agree",
      });
    },
    logout() {
      uni.showModal({
        title: "提示",
        content: "确定退出登陆吗？",
        confirmText: "确定",
        cancelText: "取消",
        confirmColor: "#000",
        success: function (res) {
          if (res.confirm) {
            uni.clearStorage();
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/index/index",
              });
            }, 500);
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.settings {
  background-color: #f5f5f5;
  min-height: 100vh;

  .container {
    padding-top: 20rpx;
  }

  .menu-list {
    border-radius: 12rpx;
    font-size: 26rpx;

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 20rpx;
      border-bottom: 1rpx solid #eee;
      background: #fff;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .logout {
    width: 90%;
    margin: 0 auto;
    margin-top: 60rpx;
    background-color: #fff;
    border-radius: 60rpx;
    border: 1px solid #eee;
    padding: 20rpx;
    text-align: center;
    font-size: 26rpx;
    color: #333;

    .logout-text {
      font-size: 32rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style> 